<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>
</head>
<body>
    <div id="page1">
        <p>page1</p>
        <a href="page2">跳转到page2</a>
    </div>
    <div id="page2">
        <p>page2</p>
        <a href="javascript:void(0)" id="gotopage1">跳转到page2</a>

    </div>

</body>
<script>
    var AppRouter = Backbone.Router.extend({
        initialize:function(){
            $('#page1').hide();
            $('#page2').hide();
        },
        routes:{
            'page1':'showpage1',
            'page2':'showpage2'
        },
        showpage1:function(){
                $('#page1').show();
                $('#page2').hide();
        },
        showpage2:function(){
            $('#page2').show();
            $('#page1').hide();
        },
    })
    var app = new AppRouter();
   // Backbone.history.start()
    Backbone.history.start({
        pushState:true,
        root:'Backbone'
    })
    $('#gotopage1').click(function(e){
        e.preventdefault()
        app.navigate('#page2',{trigger:true})
    })
</script>
</html>